<script lang="ts" setup>
import CommonPage from "@/newComponents/CommonPage.vue";
import { formatter } from "@/utils/formatterUtils";
import LzArticleAPI, { LzArticlePageVO } from "@/api/content/lz-article";
import ArticleDialog from "@/views/content/lz-article/ArticleDialog.vue";
import LzCategoryAPI from "@/api/content/lz-category";

const pageRef = ref();
const categoryList = ref<any[]>();

// 获取分类列表
async function toGetCategoryList() {
  LzCategoryAPI.getAll().then((response: any) => {
    categoryList.value = response;
  });
}

toGetCategoryList();
</script>
<template>
  <common-page ref="pageRef" :page-api="LzArticleAPI" :component="ArticleDialog">
    <template #formContent="{ filters }">
      <el-form-item label="文章标题" prop="title">
        <el-input v-model="filters.title" placeholder="请输入文章标题" clearable></el-input>
      </el-form-item>
      <el-form-item label="文章摘要" prop="summary">
        <el-input v-model="filters.summary" placeholder="请输入文章标题" clearable></el-input>
      </el-form-item>
      <el-form-item label="文章分类" prop="categoryId">
        <el-select v-model="filters.categoryId" placeholder="请选择" clearable style="width: 200px">
          <el-option
            v-for="category in categoryList"
            :key="category.id"
            :label="category.name"
            :value="category.id"
          />
        </el-select>
      </el-form-item>
    </template>
    <template #tableContent>
      <el-table-column prop="id" label="博文ID" align="center" :formatter="formatter" />
      <el-table-column prop="title" label="标题" align="center" :formatter="formatter" />
      <el-table-column prop="summary" label="摘要" align="center" :formatter="formatter" />
      <el-table-column prop="categoryName" label="分类" align="center" :formatter="formatter" />

      <el-table-column prop="thumbnail" label="缩略图" align="center" :formatter="formatter">
        <template #default="{ row }">
          <img :src="row.thumbnail" alt="" style="width: 100px; height: 100px" />
        </template>
      </el-table-column>
      <el-table-column prop="tags" label="标签" align="center" :formatter="formatter">
        <template #default="{ row }">
          <div style="display: flex; gap: 5px; flex-wrap: wrap">
            <el-tag v-for="tag in row.tags" :key="tag" type="primary">
              {{ tag }}
            </el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="createdName" label="创建人" align="center" :formatter="formatter" />
      <el-table-column prop="updatedName" label="更新人" align="center" :formatter="formatter" />
      <el-table-column prop="status" label="文章状态" align="center" :formatter="formatter">
        <template #default="{ row }: { row: LzArticlePageVO }">
          <el-tag :type="row.status === '0' ? 'success' : 'danger'">
            {{ row.status === "0" ? "已发布" : "草稿" }}
          </el-tag>
        </template>
      </el-table-column>
    </template>
  </common-page>
</template>
<style lang="scss" scoped></style>
